<template>
  <div class="success-page">
    <!-- 成功提示区 -->
    <div class="success-section">
      <div class="success-icon">
        <i class="fas fa-check"></i>
      </div>
      <h1>预约成功！</h1>
      <p>您已成功预约心理咨询服务，请准时参加</p>
    </div>

    <!-- 预约详情卡片 -->
    <div class="detail-card">
      <div class="card-header">
        <div class="icon-wrapper">
          <i class="fas fa-calendar-check"></i>
        </div>
        <h2>预约详情</h2>
      </div>

      <div class="detail-item">
        <div class="label">咨询师</div>
        <div class="value">张明华 博士</div>
        <div class="avatar">
          <i class="fas fa-user"></i>
        </div>
      </div>

      <div class="detail-item">
        <div class="label">咨询时间</div>
        <div class="value">2023年10月25日 14:30-15:30</div>
      </div>

      <div class="detail-item">
        <div class="label">咨询方式</div>
        <div class="value">视频咨询</div>
      </div>

      <div class="detail-item no-border">
        <div class="label">咨询主题</div>
        <div class="value">压力管理与情绪调节</div>
      </div>
    </div>

    <!-- 操作按钮 -->
    <div class="action-buttons">
      <button class="btn-primary" @click="addToCalendar">
        <i class="fas fa-calendar-alt"></i> 添加到日历
      </button>
      <button class="btn-secondary" @click="shareAppointment">
        <i class="fas fa-share-alt"></i> 分享预约
      </button>
    </div>

    <!-- 学习资源推荐 -->
    <div class="resources-section">
      <div class="section-header">
        <div class="icon-wrapper gradient">
          <i class="fas fa-graduation-cap"></i>
        </div>
        <div>
          <h2>学习资源推荐</h2>
          <p>在咨询前可以学习以下资源</p>
        </div>
      </div>

      <!-- 资源卡片1 -->
      <div class="resource-card" @click="openResource('焦虑的真相与应对')">
        <div class="resource-thumbnail video">
          <i class="fas fa-video"></i>
        </div>
        <div class="resource-content">
          <span class="resource-tag">科普短视频</span>
          <h3>焦虑的真相与应对</h3>
          <p>了解焦虑产生的机制和科学应对方法，5分钟快速掌握核心知识</p>
          <div class="resource-meta">
            <span><i class="fas fa-clock"></i> 5:30</span>
            <span><i class="fas fa-eye"></i> 12.8万次播放</span>
          </div>
        </div>
      </div>

      <!-- 资源卡片2 -->
      <div class="resource-card" @click="openResource('10分钟呼吸冥想练习')">
        <div class="resource-thumbnail audio">
          <i class="fas fa-headphones"></i>
        </div>
        <div class="resource-content">
          <span class="resource-tag">正念音频</span>
          <h3>10分钟呼吸冥想练习</h3>
          <p>专业引导的冥想练习，帮助您快速放松身心，缓解紧张情绪</p>
          <div class="resource-meta">
            <span><i class="fas fa-clock"></i> 10:15</span>
            <span><i class="fas fa-download"></i> 8.4万次使用</span>
          </div>
        </div>
      </div>

      <!-- 资源卡片3 -->
      <div class="resource-card" @click="openResource('压力自测量表')">
        <div class="resource-thumbnail assessment">
          <i class="fas fa-clipboard-list"></i>
        </div>
        <div class="resource-content">
          <span class="resource-tag">评估量表</span>
          <h3>压力自测量表</h3>
          <p>专业心理评估工具，3分钟了解自身压力水平，获得个性化建议</p>
          <div class="resource-meta">
            <span><i class="fas fa-file-alt"></i> 15题</span>
            <span><i class="fas fa-user-check"></i> 24.3万人测试</span>
          </div>
        </div>
      </div>

      <!-- 资源卡片4 -->
      <div class="resource-card" @click="openResource('情绪管理的7个科学方法')">
        <div class="resource-thumbnail article">
          <i class="fas fa-book-open"></i>
        </div>
        <div class="resource-content">
          <span class="resource-tag">科普文章</span>
          <h3>情绪管理的7个科学方法</h3>
          <p>基于心理学研究的实用技巧，帮助您更好地管理日常情绪波动</p>
          <div class="resource-meta">
            <span><i class="fas fa-clock"></i> 8分钟阅读</span>
            <span><i class="fas fa-star"></i> 9.2分</span>
          </div>
        </div>
      </div>
    </div>

    <!-- 底部提示 -->
    <div class="footer-note">
      <p>
        <i class="fas fa-info-circle"></i>
        温馨提示：请在咨询前10分钟做好准备，确保网络通畅和设备正常
      </p>
    </div>
  </div>
</template>

<script>
export default {
  name: "AppointmentSuccess",
  methods: {
    addToCalendar() {
      alert("预约已添加到您的日历应用");
    },
    shareAppointment() {
      alert("预约详情分享功能已激活");
    },
    openResource(title) {
      alert(`即将打开资源: ${title}`);
    },
  },
};
</script>

<style scoped>
@import url("https://fonts.googleapis.com/css2?family=Noto+Sans+SC:wght@400;500;600;700&display=swap");
@import url("https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css");

.success-page {
  min-height: 100vh;
  padding: 2rem 1rem;
  background: linear-gradient(135deg, #f5f9ff 0%, #e3f2fd 100%);
  font-family: "Noto Sans SC", sans-serif;
  box-sizing: border-box;
}

/* 成功提示区 */
.success-section {
  text-align: center;
  margin-bottom: 2.5rem;
}

.success-icon {
  width: 6rem;
  height: 6rem;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0 auto 1.5rem;
  background: linear-gradient(135deg, #43cea2 0%, #185a9d 100%);
  box-shadow: 0 10px 25px rgba(67, 206, 162, 0.3);
}

.success-icon i {
  color: white;
  font-size: 2.25rem;
}

.success-section h1 {
  font-size: 1.5rem;
  font-weight: 700;
  color: #185a9d;
  margin-bottom: 0.5rem;
}

.success-section p {
  color: #6b7280;
}

/* 预约详情卡片 */
.detail-card {
  background: white;
  border-radius: 1rem;
  padding: 1.5rem;
  margin-bottom: 2rem;
  box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1),
    0 4px 6px -2px rgba(0, 0, 0, 0.05);
}

.card-header {
  display: flex;
  align-items: center;
  margin-bottom: 1.5rem;
}

.icon-wrapper {
  width: 3rem;
  height: 3rem;
  border-radius: 0.75rem;
  background-color: #eff6ff;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #3b82f6;
  font-size: 1.25rem;
  margin-right: 0.75rem;
}

.icon-wrapper.gradient {
  background: linear-gradient(135deg, #3b82f6, #4b5563);
  color: white;
}

.card-header h2 {
  font-size: 1.25rem;
  font-weight: 600;
  color: #374151;
}

.detail-item {
  display: flex;
  align-items: center;
  padding: 1rem 0;
  border-bottom: 1px dashed #f3f4f6;
}

.detail-item.no-border {
  border-bottom: none;
  padding-top: 1rem;
  padding-bottom: 0;
}

.detail-item .label {
  width: 33.33%;
  color: #6b7280;
  font-weight: 500;
}

.detail-item .value {
  flex: 1;
  font-weight: 500;
  color: #374151;
}

.avatar {
  width: 3.5rem;
  height: 3.5rem;
  border-radius: 50%;
  background: linear-gradient(135deg, #3b82f6, #4b5563);
  display: flex;
  align-items: center;
  justify-content: center;
  color: white;
  font-size: 1.5rem;
  margin-left: 0.5rem;
}

/* 操作按钮 */
.action-buttons {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1rem;
  margin-bottom: 2.5rem;
}

button {
  padding: 1rem;
  border-radius: 0.75rem;
  font-weight: 600;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1),
    0 2px 4px -1px rgba(0, 0, 0, 0.06);
  transition: all 0.3s ease;
  border: none;
  cursor: pointer;
}

button:hover {
  box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1),
    0 4px 6px -2px rgba(0, 0, 0, 0.05);
}

.btn-primary {
  background: linear-gradient(135deg, #3b82f6, #4b5563);
  color: white;
}

.btn-secondary {
  background: white;
  color: #3b82f6;
  border: 1px solid #3b82f6;
}

button i {
  margin-right: 0.5rem;
}

/* 学习资源推荐 */
.resources-section {
  margin-bottom: 3rem;
}

.section-header {
  display: flex;
  align-items: center;
  margin-bottom: 1.5rem;
}

.section-header h2 {
  font-size: 1.25rem;
  font-weight: 700;
  color: #374151;
  margin-bottom: 0.25rem;
}

.section-header p {
  font-size: 0.875rem;
  color: #6b7280;
}

/* 资源卡片 */
.resource-card {
  background: white;
  border-radius: 0.75rem;
  overflow: hidden;
  margin-bottom: 1rem;
  box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1),
    0 4px 6px -2px rgba(0, 0, 0, 0.05);
  display: flex;
  transition: all 0.3s ease;
  cursor: pointer;
}

.resource-card:hover {
  transform: translateY(-2px);
  box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1),
    0 10px 10px -5px rgba(0, 0, 0, 0.04);
}

.resource-thumbnail {
  width: 6rem;
  display: flex;
  align-items: center;
  justify-content: center;
  color: white;
  font-size: 1.875rem;
}

.resource-thumbnail.video {
  background: linear-gradient(135deg, #f472b6, #fbcfe8);
}

.resource-thumbnail.audio {
  background: linear-gradient(135deg, #93c5fd, #dbeafe);
}

.resource-thumbnail.assessment {
  background: linear-gradient(135deg, #0d9488, #1d4ed8);
}

.resource-thumbnail.article {
  background: linear-gradient(135deg, #fbbf24, #3b82f6);
}

.resource-content {
  padding: 1rem;
  flex: 1;
}

.resource-tag {
  font-size: 0.75rem;
  font-weight: 500;
  color: #3b82f6;
  background-color: #eff6ff;
  padding: 0.25rem 0.75rem;
  border-radius: 9999px;
}

.resource-content h3 {
  font-size: 1rem;
  font-weight: 600;
  color: #374151;
  margin: 0.5rem 0 0.25rem;
}

.resource-content p {
  font-size: 0.875rem;
  color: #6b7280;
  margin-bottom: 0.75rem;
}

.resource-meta {
  display: flex;
  font-size: 0.75rem;
  color: #9ca3af;
}

.resource-meta span {
  margin-right: 1rem;
}

.resource-meta i {
  margin-right: 0.25rem;
}

/* 底部提示 */
.footer-note {
  text-align: center;
  font-size: 0.875rem;
  color: #6b7280;
}

.footer-note i {
  margin-right: 0.25rem;
}

/* 响应式设计 */
@media (max-width: 480px) {
  .success-page {
    padding: 1rem 0.5rem;
  }

  .detail-item {
    flex-direction: column;
    align-items: flex-start;
  }

  .detail-item .label {
    width: 100%;
    margin-bottom: 0.5rem;
  }

  .detail-item .value {
    width: 100%;
  }

  .avatar {
    align-self: flex-end;
    margin-top: 0.5rem;
  }

  .action-buttons {
    grid-template-columns: 1fr;
  }
}
</style>
